import React from 'react';
import { Switch, Route, Redirect } from "react-router-dom"
// import Login from "./pages/Login/Login"
// import Register from "./pages/Register/Register"
// import Index from "./pages/Index/Index"

// import List from "./pages/List/List"
// import Detail from "./pages/Detail/Detail"
// import Search from "./pages/Search/Search"
import { DotLoading } from "antd-mobile"
import PrivateRoute from './utils/PrivateRoute';
const Index = React.lazy(() => import("./pages/Index/Index"))
const Register = React.lazy(() => import("./pages/Register/Register"))
const List = React.lazy(() => import("./pages/List/List"))
const Search = React.lazy(() => import("./pages/Search/Search"))
const Detail = React.lazy(() => import("./pages/Detail/Detail"))
const Login = React.lazy(() => import("./pages/Login/Login"))
const App = () => {
  return (
    <div className='app'>
      <React.Suspense fallback={<DotLoading color='primary' />}>
        {/* Switch 路由视图 */}
        <Switch>
          {/* Route 路由规则 */}
          <Route path="/login" component={Login}></Route>
          <Route path="/register" component={Register}></Route>
          <PrivateRoute path="/index" component={Index}></PrivateRoute>
          <PrivateRoute path="/list" component={List}></PrivateRoute>
          {/* <Route path="/list" component={List}></Route>
           <Redirect to="/login"></Redirect>
          */}
          <PrivateRoute path="/detail/:id" component={Detail}></PrivateRoute>
          <PrivateRoute path="/search" component={Search}></PrivateRoute>
          {/* Redirect 重定向 */}
          <Redirect to="/login"></Redirect>
        </Switch>
      </React.Suspense>

    </div>
  );
}

export default App;
